{% extends "base.html" %}
{% block title %}
    添加技术
{% endblock %}
{% block logo %}

        <span href="" class="dropdown-toggle"><i class="fa fa-user"></i>  {{ user.username }}
            <ul class="dropdown-menu">
                {% if user.is_staff %}
                <li><a href="/psw-modify/">修改密码</a></li>
                <li><a href="/user-list/">用户管理</a></li>
                {% else %}
                <li><a href="/psw-modify/">修改密码</a></li>
                {% endif %}
            </ul>
        </span> | <a href="/logout/">退出</a>
        <script type="text/javascript">
            $(function(){
                $(".dropdown-toggle").hover(function(){
                    $(".dropdown-menu").toggle();
                })
            })
        </script>

{% endblock %}
{% block content %}
                <div class="data-detail">
                    <form action="/tec_add_submit/" method="post" enctype="multipart/form-data">
                        <ul class="ad-ul">
                            <li class="clearfix">
                                <label>技术名称 : </label>
                                <div><input name="tec_name" id="tec_name" type="text"><span class="ml10 red f12"></span></div>
                            </li>
                            <li class="clearfix">
                                <label>技术类别 : </label>
                                <div>
                                    <select name="tec_type" class="mr30" id="tec_type" >
                                        <option value="">--请选择--</option>
                                        <option value="物理">物理</option>
                                        <option value="化学">化学</option>
                                        <option value="生物">生物</option>
                                        <option value="组合">组合</option>
                                    </select>
                                    <span class="ml10 red f12"></span>
                                </div>
                            </li>
                            <li class="clearfix">
                                <label>技术简介 : </label>
                                <div>
                                    <textarea name="tec_info" id="tec_intro" rows="5"></textarea>
                                    <span class="ml10 red f12"></span>
                                </div>
                            </li>
                            <li class="clearfix">
                                <label>污染物种类 : </label>
                                <div>
                                    <input name="poll_type" id="pollutant_type" class="multiple-sel-input" type="text" readonly>
                                    <div class="sel-lists">
                                        <ul>
                                            <li><input class="target" type="checkbox"> <span>重金属</span></li>
                                            <li><input class="target" type="checkbox"> <span>有机物</span></li>
                                        </ul>
                                    </div>
                                    <span class="ml10 red f12"></span>
                                    <span class="f12 ml10">(*可多选)</span>
                                </div>
                            </li>
                            <li class="clearfix">
                                <label>污染物名称 : </label>
                                <div><input name="poll_name" id="pollutant_name" type="text"><span class="ml10 red f12"></span></div>
                            </li>
                            <li class="clearfix">
                                <label>污染物存在介质 : </label>
                                <div>
                                    <input name="poll_media" id="pollutant_mediator" class="multiple-sel-input" type="text" readonly>
                                    <div class="sel-lists">
                                        <ul>
                                            <li><input class="target" type="checkbox"> <span>土壤</span></li>
                                            <li><input class="target" type="checkbox"> <span>地下水</span></li>
                                            <li><input class="target" type="checkbox"> <span>沉积物</span></li>
                                            <li><input class="target" type="checkbox"> <span>废物</span></li>
                                        </ul>
                                    </div>
                                    <span class="ml10 red f12"></span>
                                    <span class="f12 ml10">(*可多选)</span>
                                </div>
                            </li>
                            <li class="clearfix">
                                <label>处置地点 : </label>
                                <div>
                                    <input name="poll_dispose" id="disposal_site" class="multiple-sel-input" type="text" readonly>
                                    <div class="sel-lists">
                                        <ul>
                                            <li><input class="target" type="checkbox"> <span>原位</span></li>
                                            <li><input class="target" type="checkbox"> <span>异位</span></li>
                                        </ul>
                                    </div>
                                    <span class="ml10 red f12"></span>
                                    <span class="f12 ml10">(*可多选)</span>
                                </div>
                            </li>
                            <li class="clearfix">
                                <label>二次污染控制要点 : </label>
                                <div>
                                    <textarea name="tec_second_contrller" id="secondary_pollution" rows="5"></textarea><span class="ml10 red f12"></span>
                                </div>
                            </li>
                            <li><hr></li>
                            <li class="clearfix">
                                <label>成熟性 : </label>
                                <div>
                                    <select name="tec_mature" id="maturity" class="mr30">
                                        <option value="">--请选择--</option>
                                        <option value="成熟">成熟</option>
                                        <option value="不成熟">不成熟</option>
                                    </select>
                                    <span class="ml10 red f12"></span>
                                </div>
                            </li>
                            <li class="clearfix">
                                <label>时间 : </label>
                                <div>
                                    <select name="tec_time" id="time_sel" class="mr30">
                                        <option value="">--请选择--</option>
                                        <option value="长">长</option>
                                        <option value="短">短</option>
                                        <option value="不确定">不确定</option>
                                    </select>
                                    <span class="ml10 red f12"></span>
                                    <input name="tec_input_time" class="small-text" type="text" placeholder="具体时间">
                                </div>
                            </li>
                            <li class="clearfix">
                                <label>成本 : </label>
                                <div>
                                    <select name="tec_cost" id="cost" class="mr30">
                                        <option value="">--请选择--</option>
                                        <option value="高">高</option>
                                        <option value="中">中</option>
                                        <option value="低">低</option>
                                    </select>
                                    <span class="ml10 red f12"></span>
                                    <input name="tec_input_cost" class="small-text" type="text" placeholder="具体金额">
                                </div>
                            </li>
                            <li class="clearfix">
                                <label>污染物浓度 : </label>
                                <div>
                                    <input name="tec_poll_density" id="pollutant_concentration" class="multiple-sel-input" type="text" readonly>
                                    <div class="sel-lists">
                                        <ul>
                                            <li><input class="target" type="checkbox"> <span>高</span></li>
                                            <li><input class="target" type="checkbox"> <span>中</span></li>
                                            <li><input class="target" type="checkbox"> <span>低</span></li>
                                        </ul>
                                    </div>
                                    <span class="ml10 red f12"></span>
                                    <span class="f12 ml10">(*可多选)</span>
                                </div>
                            </li>
                            <li class="clearfix">
                                <label>应用的适应性 : </label>
                                <div>
                                    <input name="tec_adapt" id="adapt" type="text"><span class="ml10 red f12"/>
                                </div>
                            </li>
                            <li class="clearfix">
                                <label>应用的局限性 : </label>
                                <div>
                                    <input name="tec_limit" id="limitation" type="text"/>
                                    <span class="ml10 red f12"></span>
                                </div>
                            </li>
                            <li><hr></li>
                            <li class="clearfix">
                                <label>国际应用情况 : </label>
                                <div>
                                    <textarea name="tec_internation" id="in_apply_condition" rows="5"></textarea>
                                    <span class="ml10 red f12"></span>
                                </div>
                            </li>
                            <li class="clearfix">
                                <label>国内应用案例 : </label>
                                <div>
                                    <textarea name="tec_case" id="in_apply_case" rows="5"></textarea>
                                    <span class="ml10 red f12"></span>
                                </div>
                            </li>
                            <li class="clearfix">
                                <label>工程图片 : </label>
                                <div style="position:relative;">
                                    <input id="addImg" type="button" value="继续上传" style="position:absolute;right:0px;">
{#                                    <input style="width:120px;" type="text" name="imagename" placeholder="图片名称">#}
{#                                    <input name="image" type="file"><br>#}
                                    <div class="fileinput fileinput-new" data-provides="fileinput"><input type="hidden">
                                        <div class="fileinput-new thumbnail" style="width: 128px; height: 120px;" data-trigger="fileinput">
                                            <img src="http://placehold.it/200x150" alt="...">
                                        </div>
                                        <div class="fileinput-preview fileinput-exists thumbnail" style="width: 128px; max-height: 120px; line-height: 6px;"></div>
                                        <div>
                                            <span class="btn-white btn-file">
                                                <span class="btn fileinput-new">上传图片</span>
                                                <input style="width: 128px;" class="fileinput-exists" name="imagename" type="text" placeholder="输入图片名称" />
                                                <span class="btn fileinput-exists">修改</span>
                                                <input type="file" name="image" accept="image/*">
                                            </span>
                                            <a href="#" class="btn btn-orange fileinput-exists" data-dismiss="fileinput">删除</a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="clearfix">
                                <label>资料链接 : </label>
                                <div style="position:relative;">
                                    <input id="addResource" type="button" value="继续添加" style="position:absolute;left:350px;">
                                    <input name="link" class="" type="text" placeholder="输入网址链接">
                                    <span class="f12">(*输入网址链接)</span>
                                    <!-- <input name="image" class="clearfix mt5" type="file"> -->
                                </div>
                            </li>
                            <li class="clearfix">
                                <label>资料文件 : </label>
                                <div style="position:relative;">
                                    <input id="addFile" type="button" value="继续上传" style="position:absolute;left:400px;">
                                    <input  name="file" class="" type="file">
                                      <span class="f12">(*暂时只支持pdf格式文件)</span>
                                </div>
                            </li>
                        </ul>
                      <div class="submit-btn"><input id="submint_btn" type="submit" value="提 交"></div>
                    </form>
                </div>
                <script type="text/javascript">
                    $(function(){
                        $("#addImg").click(function(){
                            var files = $(this).parent().find("input[type='file']");
                            var filesName = $(this).parent().find("input[type='text']");
                            for (var i = 0; i < files.length; i++) {
                                if ($(files[i]).val()=="") {
                                    alert("请选择上传的图片!")
                                    return false;
                                }
                            }
                            for (var i = 0; i < filesName.length; i++) {
                                if ($(filesName[i]).val()=="") {
                                    alert("请输入图片名称!")
                                    return false;
                                }
                            }
                            $(this).parent().append('   <div class="fileinput fileinput-new" data-provides="fileinput"><input type="hidden">'
                                        +'<div class="fileinput-new thumbnail" style="width: 128px; height: 120px;" data-trigger="fileinput">'
                                        +'<img src="http://placehold.it/200x150" alt="...">'
                                        +'</div>'
                                        +'<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 128px; max-height: 120px; line-height: 6px;"></div>'
                                        +'<div>'
                                        +'<span class="btn-white btn-file">'
                                        +'<span class="btn fileinput-new">上传图片</span>'
                                        +'<input style="width: 128px;" class="fileinput-exists" name="imagename" type="text" placeholder="输入图片名称" />'
                                        +'<span class="btn fileinput-exists">修改</span><input type="file" name="image" accept="image/*"></span>  '
                                        +'<a href="#" class="btn btn-orange fileinput-exists" data-dismiss="fileinput"> 删除</a>'
                                        +'</div></div>')
                        })
                        $("#addResource").click(function(){
                            var urls = $(this).parent().find("input[type='text']");
                            var files = $(this).parent().find("input[type='file']");
                            
                            for (var i = 0; i < urls.length; i++) {
                                if ($(urls[i]).val()=="") {
                                    alert("请输入网址链接!")
                                    return false;
                                }
                            }
                            $(this).parent().append('<input name="link" class="mt5" type="text" placeholder="输入网址链接"><span class="f12"> (*输入网址链接)</span>')
                        })
                        $("#addFile").click(function(){
                            var files = $(this).parent().find("input[type='file']");
                            for (var i = 0; i < files.length; i++) {
                                if ($(files[i]).val()=="") {
                                    alert("请选择上传的文件!")
                                    return false;
                                }
                            }
                            $(this).parent().append('<input name="file" class="clearfix mt5" type="file">')
                        })
                        
                    })
                </script>
{% endblock %}
